<template>
  <div>
    <!--附件详情-->
    <Dialog
      ref="enclosureXq"
      dialogCls="mydlgg"
      headerCls="mydlgg-head"
      footerCls="mydlgg-foot"
      :dialogStyle="{ width: '400px', marginLeft: '50px' }"
      :modal="true"
      borderType="thin"
    >
      <div slot="header">
        <span class="headerIcon newlyAdded"></span>
        <span class="titleStyle">附件详情</span>
      </div>
      <div class="insidePadding">
        <!-- 表格容器   -->
        <div style="height: 200px">
          <ag-grid-vue
            id="gridSelect"
            style="width: 100%; height: 100%;"
            class="ag-theme-balham"
            :columnDefs="enclosure.xqColumnDefs"
            rowSelection="multiple"
            :defaultColDef="defaultColDef"
            :rowDeselection="true"
            :rowData="enclosure.xqRowData"
            :localeText="localeText"
          ></ag-grid-vue>
        </div>
      </div>
    </Dialog>
  </div>
</template>

<script>
import { AgGridVue } from "ag-grid-vue";
import bdEnclosure from "@/api/bdEnclosure/bdEnclosure";
import cfg from "@/config/config";
import language_ag from "../../config/localization_ag";

export default {
  name: "bdEnclosureDialog",
  components: {
    AgGridVue
  },
  beforeMount() {
    this.defaultColDef = {
      //单元格样式
      cellStyle: { "border-right": "1px solid #d9dcde" }
    };
  },
  mounted() {
    this.$refs.enclosureXq.close();
  },
  data() {
    return {
      localeText: language_ag,
      defaultColDef: null,
      selectedRowDataUp: {},
      enclosure: {
        xqRowData: [],
        xqColumnDefs: [
          {
            headerName: "附件名称",
            field: "originalName",
            width: 200,
            suppressMenu: true
          },
          {
            headerName: "下载",
            field: "enclosureAddr",
            width: 100,
            minWidth: 80,
            suppressMenu: true,
            cellRenderer: function(object) {
              var eDiv = document.createElement("div");
              eDiv.innerHTML =
                '<span class="my-css-class"><a class="inTableBtn btn-download"> </a></span> ';
              var eButton = eDiv.querySelectorAll(".btn-download")[0];
              var classVal = eButton.getAttribute("class");
              // 显示可点击图标
              classVal = classVal.replace(/btn-download/, "btn-download");
              eButton.setAttribute("class", classVal);
              eButton.setAttribute("title", "下载");
              eButton.addEventListener("click", function() {
                //下载图片
                var ulr =
                  cfg.apiUrl +
                  object.value.substring(object.value.lastIndexOf("effective"));
                //图片路径
                var imgsrc = ulr.replace(/\\/g, "/");

                // 后缀获取
                var suffix = "";
                // 获取类型结果
                var result = "";
                try {
                  var flieArr = imgsrc.split(".");
                  suffix = flieArr[flieArr.length - 1];
                } catch (err) {
                  suffix = "";
                }

                // 图片格式
                var imglist = ["png", "jpg", "jpeg", "bmp", "gif"];
                // 进行图片匹配
                result = imglist.some(function(item) {
                  return item == suffix;
                });

                if (result) {
                  //图片名称
                  var name = object.value
                    .substring(object.value.lastIndexOf("effective"))
                    .split(/\\/g)[2];
                  let image = new Image();
                  // 解决跨域 Canvas 污染问题
                  image.setAttribute("crossOrigin", "anonymous");
                  image.onload = function() {
                    let canvas = document.createElement("canvas");
                    canvas.width = image.width;
                    canvas.height = image.height;
                    let context = canvas.getContext("2d");
                    context.drawImage(image, 0, 0, image.width, image.height);
                    let url = canvas.toDataURL("image/png"); //得到图片的base64编码数据
                    let a = document.createElement("a"); // 生成一个a元素
                    let event = new MouseEvent("click"); // 创建一个单击事件
                    a.download = name || "photo"; // 设置图片名称
                    a.href = url; // 将生成的URL设置为a.href属性
                    a.dispatchEvent(event); // 触发a的单击事件
                  };
                  image.src = imgsrc;
                } else {
                  window.open(imgsrc);
                }
              });
              return eDiv;
            }
          }
        ]
      },
      // 根据文件名后缀区分 文件类型
      /*
       * @param: fileName - 文件名称
       * @param: 数据返回 1) 无后缀匹配 - false
       * @param: 数据返回 2) 匹配图片 - image
       * @param: 数据返回 3) 匹配 txt - txt
       * @param: 数据返回 4) 匹配 excel - excel
       * @param: 数据返回 5) 匹配 word - word
       * @param: 数据返回 6) 匹配 pdf - pdf
       * @param: 数据返回 7) 匹配 ppt - ppt
       * @param: 数据返回 8) 匹配 视频 - video
       * @param: 数据返回 9) 匹配 音频 - radio
       * @param: 数据返回 10) 其他匹配项 - other
       */
      matchType(fileName) {
        // 后缀获取
        var suffix = "";
        // 获取类型结果
        var result = "";
        try {
          var flieArr = fileName.split(".");
          suffix = flieArr[flieArr.length - 1];
        } catch (err) {
          suffix = "";
        }
        // fileName无后缀返回 false
        if (!suffix) {
          result = false;
          return result;
        }
        // 图片格式
        var imglist = ["png", "jpg", "jpeg", "bmp", "gif"];
        // 进行图片匹配
        result = imglist.some(function(item) {
          return item == suffix;
        });
        if (result) {
          result = "image";
          return result;
        }
        // 匹配txt
        var txtlist = ["txt"];
        result = txtlist.some(function(item) {
          return item == suffix;
        });
        if (result) {
          result = "txt";
          return result;
        }
        // 匹配 excel
        var excelist = ["xls", "xlsx"];
        result = excelist.some(function(item) {
          return item == suffix;
        });
        if (result) {
          result = "excel";
          return result;
        }
        // 匹配 word
        var wordlist = ["doc", "docx"];
        result = wordlist.some(function(item) {
          return item == suffix;
        });
        if (result) {
          result = "word";
          return result;
        }
        // 匹配 pdf
        var pdflist = ["pdf"];
        result = pdflist.some(function(item) {
          return item == suffix;
        });
        if (result) {
          result = "pdf";
          return result;
        }
        // 匹配 ppt
        var pptlist = ["ppt"];
        result = pptlist.some(function(item) {
          return item == suffix;
        });
        if (result) {
          result = "ppt";
          return result;
        }
        // 匹配 视频
        var videolist = ["mp4", "m2v", "mkv"];
        result = videolist.some(function(item) {
          return item == suffix;
        });
        if (result) {
          result = "video";
          return result;
        }
        // 匹配 音频
        var radiolist = ["mp3", "wav", "wmv"];
        result = radiolist.some(function(item) {
          return item == suffix;
        });
        if (result) {
          result = "radio";
          return result;
        }
        // 其他 文件类型
        result = "other";
        return result;
      },
      open() {
        this.$refs.enclosureXq.open();
      },
      close() {
        this.clearData();
        this.orderId = "";
        this.$refs.enclosureXq.close();
      },
      clearData() {
        this.enclosure.xqRowData = [];
      },
      findEnclosureList(orderId, orderType) {
        this.$loading("请稍等...");
        // 获取附件名称
        bdEnclosure
          .findEnclosureList({
            orderId: orderId,
            orderType: orderType
          })
          .then(res => {
            this.$loading.close();
            if (res.code == 200) {
              this.enclosure.xqRowData = res.result;
            } else {
              this.$messager.alert({
                title: "操作提示",
                icon: "error",
                msg: res.message
              });
            }
          });
      }
    };
  }
};
</script>
